<template>
	<view class="" style="width: 100%;">
		<picker @change="bindPickerChange" :value="tabIndex" :range="array" :range-key="rangeKey">
			<view class="uni-input">
				<text>{{array[tabIndex].name}}</text>
				<image class="img" :src="imgUrl+'/right.png'" mode=""></image>
			</view> 
		</picker>
	</view>
</template>

<script>
export default{
		props:{
			array:{
				type:[Array,Object],
				default:()=>[]
			},
			tabIndex:{
				type:[Number,String],
				default:()=>0
			},
			rangeKey:{
				type:[String],
				default:()=>''
			}
		},
		data(){
			return {
				index:0,
				imgUrl:this.imgUrl,
			}
		},
		methods:{
			bindPickerChange(e){
				this.$emit('onChange',e)
			}
		}
	}
</script>

<style>
	.uni-input{
		width: 100%;
		min-width: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.img{
		width: 20rpx;
		height: 20rpx;
	}
</style>